<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>六度-周期性报告生成器</title>
    <!-- 引入 Element Plus 最新版样式 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='cdn/index.css') }}" />
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div id="app" v-loading.fullscreen.lock="fullscreenLoading">
        <el-container class="main-container">
            <el-header class="app-header">
                <div class="logo">
                    <span>六度-周期性报告生成器</span>
                </div>
                <div class="nav-menu">
                    <el-button-group>
                        <el-button 
                            :type="activeMenu === 'report' ? 'primary' : ''" 
                            @click="handleMenuSelect('report')"
                        >
                            报告生成
                        </el-button>
                        <el-button 
                            :type="activeMenu === 'files' ? 'primary' : ''" 
                            @click="handleMenuSelect('files')"
                        >
                            文件清单
                        </el-button>
                        <el-button 
                            :type="activeMenu === 'config' ? 'primary' : ''" 
                            @click="handleMenuSelect('config')"
                        >
                            系统参数
                        </el-button>
                    </el-button-group>
                </div>
            </el-header>

            <el-main class="app-main">
                <!-- 报告生成界面 -->
                <div v-if="activeMenu === 'report'">
                    <el-card>
                        <template #header>
                          <div class="card-header">
                            <span>生成新的报告</span>
                          </div>
                        </template>
                        <!-- 报告生成表单 -->
                        <el-tabs v-model="reportForm.type">
                            <!-- 月度报告 -->
                            <el-tab-pane label="月度报告" name="monthly">
                                <el-form label-width="120px">
                                    <el-form-item label="报告月份">
                                        <el-date-picker
                                            v-model="reportForm.monthly.period"
                                            type="month"
                                            placeholder="选择月份"
                                            format="YYYY-MM"
                                            value-format="YYYY-M"
                                        ></el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="随机事件数量">
                                         <el-input-number v-model="reportForm.randomEventCount" :min="1" :max="20"></el-input-number>
                                         <el-button type="primary" style="margin-left: 10px;" @click="handleGenerateRandomEvents">获取随机事件</el-button>
                                         <el-button type="primary" style="margin-left: 10px;" @click="handleAddReportEvent">添加事件</el-button>
                                         <el-switch
                                            v-model="reportForm.avoidWeekends"
                                            inline-prompt
                                            active-text="避开周末"
                                            inactive-text="包含周末"
                                            style="margin-left: 20px;"
                                          ></el-switch>
                                          <el-switch
                                            v-model="reportForm.avoidHolidays"
                                            inline-prompt
                                            active-text="避开节假日"
                                            inactive-text="包含节假日"
                                            style="margin-left: 20px;"
                                          ></el-switch>
                                    </el-form-item>
                                    <el-divider>事件列表</el-divider>
                                    <!-- 事件表格 -->
                                    <el-table :data="reportForm.monthly.events" border style="width: 100%">
                                        <el-table-column prop="date" label="日期" width="180">
                                            <template #default="scope">
                                                <el-date-picker
                                                    v-model="scope.row.date"
                                                    type="date"
                                                    placeholder="选择日期"
                                                    format="YYYY-MM-DD"
                                                    value-format="YYYY-MM-DD"
                                                    :disabled-date="disabledDatesForMonthlyReport"
                                                    :cell-class-name="dateCellClassName"
                                                    :default-value="getDefaultDateForPicker()"
                                                    style="width: 100%;"
                                                ></el-date-picker>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="type" label="类型" width="180">
                                             <template #default="scope">
                                                <el-select v-model="scope.row.type" filterable allow-create default-first-option placeholder="选择或输入类型" style="width: 100%;">
                                                    <el-option
                                                        v-for="type in getAvailableTypes()"
                                                        :key="type"
                                                        :label="type"
                                                        :value="type">
                                                    </el-option>
                                                </el-select>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="description" label="描述">
                                             <template #default="scope">
                                                <el-select v-model="scope.row.description" filterable allow-create default-first-option placeholder="选择或输入描述" style="width: 100%;">
                                                    <el-option
                                                        v-for="desc in getAvailableDescriptions(scope.row.type)"
                                                        :key="desc"
                                                        :label="desc"
                                                        :value="desc">
                                                    </el-option>
                                                </el-select>
                                            </template>
                                        </el-table-column>
                                         <el-table-column label="操作" width="100">
                                            <template #default="scope">
                                                <el-button @click="handleReportEventDelete(scope.$index)" type="danger" size="small">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                     <el-form-item style="margin-top: 20px;">
                                        <el-button type="success" @click="generateReport">生成月度报告</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-tab-pane>
                            <!-- 季度报告 -->
                            <el-tab-pane label="季度报告" name="quarterly">
                                 <el-form label-width="120px">
                                      <el-form-item label="报告年份">
                                        <el-date-picker
                                            v-model="reportForm.quarterly.year"
                                            type="year"
                                            placeholder="选择年份"
                                            value-format="YYYY"
                                            @change="handleYearOrQuarterChange"
                                        ></el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="报告季度">
                                        <el-select v-model="reportForm.quarterly.quarter" placeholder="选择季度" @change="handleYearOrQuarterChange">
                                            <el-option label="第一季度" :value="1"></el-option>
                                            <el-option label="第二季度" :value="2"></el-option>
                                            <el-option label="第三季度" :value="3"></el-option>
                                            <el-option label="第四季度" :value="4"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="选择月份">
                                        <el-select v-model="reportForm.quarterly.month_periods" multiple placeholder="请选择构成季度的三个月" style="width: 100%;" :disabled="!reportForm.quarterly.year || !reportForm.quarterly.quarter">
                                            <el-option
                                                v-for="item in availableMonths"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                     <el-form-item style="margin-top: 20px;">
                                        <el-button type="success" @click="generateReport">生成季度报告</el-button>
                                    </el-form-item>
                                 </el-form>
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </div>

                <!-- 文件清单界面 -->
                <div v-if="activeMenu === 'files'">
                     <el-card>
                        <template #header>
                          <div class="card-header">
                            <span>已生成的报告文件</span>
                            <el-button type="primary" @click="fetchFiles">刷新列表</el-button>
                          </div>
                        </template>
                        <!-- 文件树 -->
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-card shadow="never">
                                    <template #header>
                                        <div class="card-header">
                                            <span>Markdown (.md)</span>
                                        </div>
                                    </template>
                                    <el-tree
                                        :data="fileTree.md"
                                        :props="{ children: 'children', label: 'label' }"
                                        default-expand-all
                                        >
                                        <template #default="{ node, data }">
                                            {% raw %}
                                                <span class="custom-tree-node">
                                                    <span>{{ node.label }}</span>
                                                </span>
                                            {% endraw %}
                                        </template>
                                    </el-tree>
                                </el-card>
                            </el-col>
                            <el-col :span="12">
                                <el-card shadow="never">
                                    <template #header>
                                        <div class="card-header">
                                            <span>Word (.docx)</span>
                                        </div>
                                    </template>
                                     <el-tree
                                        :data="fileTree.docx"
                                        :props="{ children: 'children', label: 'label' }"
                                        default-expand-all
                                        >
                                         <template #default="{ node, data }">
                                            {% raw %}
                                                <span class="custom-tree-node">
                                                    <span>{{ node.label }}</span>
                                                </span>
                                            {% endraw %}
                                         </template>
                                     </el-tree>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>

                <!-- 系统配置界面 -->
                <div v-if="activeMenu === 'config'">
                    <el-card>
                        <template #header>
                          <div class="card-header">
                            <span>系统参数配置</span>
                            <el-button-group>
                                <el-button type="primary" @click="saveConfig">保存</el-button>
                                <el-button @click="resetConfig">重置更改</el-button>
                            </el-button-group>
                          </div>
                        </template>
                        <!-- 配置表单 -->
                        <el-form :model="configData" label-width="120px">
                            <el-divider content-position="left">基础信息</el-divider>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="工程师名称">
                                        <el-input v-model="configData.engineer_name"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="甲方单位名称">
                                        <el-input v-model="configData.client_name"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="乙方单位名称">
                                        <el-input v-model="configData.contractor_name"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-divider content-position="left">工作范围与事件</el-divider>
                            
                            <div v-if="configData && configData.work_scope && Object.keys(configData.work_scope).length > 0">
                                <!-- 调试用，保持隐藏状态 -->
                                <pre v-if="false">工作范围数据已加载</pre>
                                
                                <el-collapse v-model="activeCollapse" accordion class="scope-collapse">
                                    <el-collapse-item 
                                        v-for="(events, scope) in configData.work_scope" 
                                        :key="scope" 
                                        :name="scope"
                                    >
                                        <template #title>
                                            <div class="collapse-title">
                                                {% raw %}
                                                <span v-if="editingScope.oldName !== scope" @click.stop="startEditScope(scope)">
                                                    <i class="fa fa-collection"></i>
                                                    <span style="margin-left: 8px; font-weight: bold;">{{ scope }}</span>
                                                </span>
                                                <el-input
                                                    v-if="editingScope.oldName === scope"
                                                    v-model="editingScope.newName"
                                                    size="small"
                                                    ref="editScopeInput"
                                                    @click.stop
                                                    @blur="finishEditScope"
                                                    @keyup.enter="finishEditScope"
                                                ></el-input>
                                                {% endraw %}
                                            </div>
                                            <div class="scope-actions">
                                                {% raw %}
                                                <el-switch
                                                    :model-value="getScopeRandomState(scope)"
                                                    @update:model-value="toggleScopeRandom(scope)"
                                                    @click.stop
                                                    style="margin-right: 10px;"
                                                    active-text="随机"
                                                    inactive-text=""
                                                ></el-switch>
                                                {% endraw %}
                                                <el-button circle text @click.stop="startEditScope(scope)">编辑</el-button>
                                                <el-popconfirm
                                                    title="确定要删除这个工作范围及其所有事件吗？"
                                                    @confirm="deleteScope(scope)"
                                                    width="250"
                                                >
                                                    <template #reference>
                                                        <el-button circle text type="danger" @click.stop>删除</el-button>
                                                    </template>
                                                </el-popconfirm>
                                            </div>
                                        </template>
                                        {% raw %}
                                        <div v-for="(event, index) in getEventItems(events)" :key="index" class="event-item">
                                            <span v-if="!(editingEvent.scope === scope && editingEvent.index === index)" class="event-text">{{ getEventName(event) }}</span>
                                            <el-input
                                                v-if="editingEvent.scope === scope && editingEvent.index === index"
                                                v-model="editingEvent.newValue"
                                                class="event-edit-input"
                                                ref="editEventInput"
                                                size="small"
                                                @blur="finishEditEvent"
                                                @keyup.enter="finishEditEvent"
                                            ></el-input>
                                            
                                            <div class="event-actions">
                                                <el-switch
                                                    :model-value="getEventRandomState(event)"
                                                    @update:model-value="toggleEventRandom(scope, index)"
                                                    @click.stop
                                                    size="small"
                                                    style="margin-right: 10px;"
                                                    active-text="随机"
                                                    inactive-text=""
                                                ></el-switch>
                                                <el-button text bg size="small" @click.stop="startEditEvent(scope, index)">编辑</el-button>
                                                <el-popconfirm
                                                    title="确定删除此事件吗？"
                                                    @confirm="handleConfigEventDelete(scope, index)"
                                                    width="200"
                                                >
                                                    <template #reference>
                                                         <el-button size="small" text type="danger" @click.stop>删除</el-button>
                                                    </template>
                                                </el-popconfirm>
                                            </div>
                                        </div>

                                        <div class="add-event-area">
                                            <el-input
                                                v-if="inputVisible[scope]"
                                                v-model="inputValue[scope]"
                                                @blur="handleInputConfirm(scope)"
                                                placeholder="请输入新事件"
                                            ></el-input>
                                            <el-button v-else text @click="showInput(scope)">添加新事件</el-button>
                                        </div>
                                        {% endraw %}
                                    </el-collapse-item>
                                </el-collapse>
                            </div>
                            <el-empty v-else description="暂无工作范围数据，请添加新的工作范围"></el-empty>

                             <div class="new-scope-area">
                                <el-input v-model="newScopeName" placeholder="请输入新的工作范围名称" style="width: 250px; margin-right: 10px;"></el-input>
                                <el-button type="success" @click="addScope">添加工作范围</el-button>
                            </div>
                            
                            <el-divider content-position="left">模板参数说明</el-divider>
                            
                            <el-card shadow="never" style="background-color: #f8f9fa;">
                                <template #header>
                                    <div class="card-header">
                                        <span>模板参数映射说明</span>
                                        <small style="color: #666; margin-left: 10px;">以下说明各项配置参数在报告模板中的占位符</small>
                                    </div>
                                </template>
                                
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-card shadow="never" style="margin-bottom: 15px;">
                                            <template #header>
                                                <span style="font-weight: bold; color: #409EFF;">基础信息参数</span>
                                            </template>
                                            <div class="parameter-mapping">
                                                <div class="mapping-item">
                                                    <strong>工程师名称:</strong> <code>&lt;engineer_name&gt;</code>
                                                    <div class="param-desc">在报告中显示执行维护工作的工程师姓名</div>
                                                </div>
                                                <div class="mapping-item">
                                                    <strong>甲方单位名称:</strong> <code>&lt;client_name&gt;</code>
                                                    <div class="param-desc">报告中的委托方或客户单位名称</div>
                                                </div>
                                                <div class="mapping-item">
                                                    <strong>乙方单位名称:</strong> <code>&lt;contractor_name&gt;</code>
                                                    <div class="param-desc">报告中的承包方或服务提供商名称</div>
                                                </div>
                                            </div>
                                        </el-card>
                                        
                                        <el-card shadow="never">
                                            <template #header>
                                                <span style="font-weight: bold; color: #67C23A;">自动生成参数</span>
                                            </template>
                                            <div class="parameter-mapping">
                                                <div class="mapping-item">
                                                    <strong>报告日期:</strong> <code>&lt;report_date&gt;</code>
                                                    <div class="param-desc">系统自动生成，通常为报告周期最后几天内的随机日期</div>
                                                </div>
                                                <div class="mapping-item">
                                                    <strong>年份:</strong> <code>&lt;year&gt;</code>
                                                    <div class="param-desc">从报告周期中提取的年份信息</div>
                                                </div>
                                                <div class="mapping-item">
                                                    <strong>月份:</strong> <code>&lt;month&gt;</code>
                                                    <div class="param-desc">从报告周期中提取的月份信息</div>
                                                </div>
                                            </div>
                                        </el-card>
                                    </el-col>
                                    
                                    <el-col :span="12">
                                        <el-card shadow="never" style="margin-bottom: 15px;">
                                            <template #header>
                                                <span style="font-weight: bold; color: #E6A23C;">事件数据参数</span>
                                            </template>
                                            <div class="parameter-mapping">
                                                <div class="mapping-item">
                                                    <strong>事件表格:</strong> <code>&lt;event_table&gt;</code>
                                                    <div class="param-desc">根据用户输入的事件列表自动生成的Markdown表格</div>
                                                </div>
                                                <div class="mapping-item">
                                                    <strong>季度文本:</strong> <code>&lt;quarter_text&gt;</code>
                                                    <div class="param-desc">季度报告中显示的季度描述，如"第一季度"</div>
                                                </div>
                                            </div>
                                        </el-card>
                                        
                                        <el-card shadow="never">
                                            <template #header>
                                                <span style="font-weight: bold; color: #F56C6C;">智能总结参数</span>
                                            </template>
                                            <div class="parameter-mapping">
                                                <div class="mapping-item">
                                                    <strong>总结概览:</strong> <code>&lt;summary_overview&gt;</code>
                                                    <div class="param-desc">基于事件数据自动生成的工作概览</div>
                                                </div>
                                                <div class="mapping-item">
                                                    <strong>问题分析:</strong> <code>&lt;summary_issues&gt;</code>
                                                    <div class="param-desc">基于事件类型自动生成的问题分析</div>
                                                </div>
                                                <div class="mapping-item">
                                                    <strong>改进建议:</strong> <code>&lt;summary_suggestions&gt;</code>
                                                    <div class="param-desc">基于工作范围自动生成的改进建议</div>
                                                </div>
                                            </div>
                                        </el-card>
                                    </el-col>
                                </el-row>
                                
                                <el-alert
                                    title="模板使用说明"
                                    type="info"
                                    :closable="false"
                                    style="margin-top: 20px;">
                                    <p>在创建或修改报告模板时，可以使用上述占位符来动态插入配置数据。系统会在生成报告时自动替换这些占位符为实际的配置值。</p>
                                    <p><strong>示例:</strong> 在模板中写入 "工程师：&lt;engineer_name&gt;" 会在生成的报告中显示为 "工程师：张三"</p>
                                </el-alert>
                            </el-card>
                        </el-form>
                    </el-card>
                </div>
            </el-main>
            
            <!-- 页脚 -->
            <el-footer class="app-footer">
                <div class="footer-content">
                    <span>六度-周期性报告生成器 by: 六度科技 <a href="https://04826d.cn" target="_blank">04826d.cn</a></span>
                </div>
            </el-footer>
        </el-container>
    </div>
    <!-- 引入脚本 -->
    <script src="{{ url_for('static', filename='cdn/vue.global.js') }}"></script>
    <script src="{{ url_for('static', filename='cdn/index.full.js') }}"></script>
    <script src="{{ url_for('static', filename='cdn/zh-cn.js') }}"></script>
    <script src="{{ url_for('static', filename='cdn/axios.min.js') }}"></script>
    <script src="{{ url_for('static', filename='app.js') }}"></script>
</body>
</html> 